<template>
	<view style="margin-top: 150rpx;">
		<form @submit="formSubmit" @reset="formReset">
			<view class="login-text">
				用户名： <input class="uni-input" name="input" placeholder="" v-model="username" />
			</view>
			<view class="login-text">
				密&nbsp&nbsp&nbsp码： <input class="uni-input" name="input" placeholder="" v-model="password" />
			</view>

			<view class="uni-btn-v">
				<button type="primary" form-type="submit" class="button-style">登录</button>
				<button type="primary" form-type="reset" class="button-style">重置</button>
				<button type="primary" class="button-style" v-on:click="register()">注册</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"username": "",
				"password": ""
			}
		},
		onLoad() {

		},
		methods: {
			formSubmit: function(e) {
				console.log(this.username)
				console.log(this.password)

				if (this.username == '' || this.password == '') {
					uni.showModal({
						content: '用户名或者密码不能为空~',
						showCancel: false
					});
				} else {
					uni.request({
						url: 'http://127.0.0.1:8080/user-info/login',
						data: {
							name: this.username,
							password: this.password
						},
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							console.log("res is " + res.data)
							if (res.data == true) {
								uni.showModal({
									content: '登录成功~',
									showCancel: false
								});

								uni.redirectTo({
									url: '../success/success?username=' + this.username
								})
							} else {
								uni.showModal({
									content: '登录失败，请检查用户名和密码~',
									showCancel: false
								});
							}
						},
						fail: () => {
							uni.showModal({
								content: '服务器请求失败，请联系管理员~',
								showCancel: false
							});
						}
					})
				}
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			
			register() {
				uni.redirectTo({
					url:'../register/register'
				})
			}
		}
	}
</script>

<style>
	.login-text {
		display: flex;
		margin-left: 80rpx;
		margin-top: 60rpx;
	}

	.uni-input {
		width: 350rpx;
		border: 1rpx solid #808080;
	}

	.uni-btn-v {
		display: flex;

	}

	.button-style {
		margin-left: 80rpx;
		margin-top: 100rpx;
		height: 60rpx;
		width: 120rpx;
		font-size: 20rpx;
	}
</style>
